<template>
  <div class="hot-comic">
    <div class="top-head">
      <h2>畅销热门</h2>
      <span>物有所值的真香漫画</span>
    </div>
    <div class="comic-wrapper">
      <div class="comic-container">
        <div
          class="comic-card"
          v-for="(item, index) in visibleComics"
          :key="index"
          :style="{ position: 'relative' }"
        >
          <img :src="item.url" alt="" class="comic-image">
          <div class="comic-info">
            <h3 class="comic-title">{{ item.title }}</h3>
            <div class="desc-number">
              <p class="comic-desc">畅销指数</p>
              <span class="comic-number">{{ item.hotNumber }}</span>
            </div>
          </div>

          <!-- 第一个卡片左侧的向前按钮 -->
          <button
            v-if="index === 0 && hasPrevComics"
            class="nav-btn prev-btn"
            @click.stop="showPrevSet"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
          </button>

          <!-- 最后一个卡片右侧的向后按钮 -->
          <button
            v-if="index === visibleComics.length - 1 && hasMoreComics"
            class="nav-btn next-btn"
            @click.stop="showNextSet"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import img1 from '@/assets/imgs/comic/hot_img1.png';

const allComics = ref([
  { url: img1, title: "本圣女摊牌了", hotNumber: "1190" },
  { url: img1, title: "租借女友", hotNumber: "1141" },
  { url: img1, title: "有兽焉", hotNumber: "2076" },
  { url: img1, title: "圣女小姐请停止你的奇怪...", hotNumber: "2919" },
  { url: img1, title: "极刑·饭", hotNumber: "3607" },
  { url: img1, title: "漫画6", hotNumber: "1234" },
  { url: img1, title: "漫画7", hotNumber: "2345" },
  { url: img1, title: "漫画8", hotNumber: "3456" },
  { url: img1, title: "漫画9", hotNumber: "4567" },
  { url: img1, title: "漫画10", hotNumber: "5678" }
]);

const currentSet = ref(0);
const cardsPerSet = 5;

const visibleComics = computed(() => {
  const start = currentSet.value * cardsPerSet;
  return allComics.value.slice(start, start + cardsPerSet);
});

const hasMoreComics = computed(() => {
  return (currentSet.value + 1) * cardsPerSet < allComics.value.length;
});

const hasPrevComics = computed(() => {
  return currentSet.value > 0;
});

const showNextSet = () => {
  if (hasMoreComics.value) {
    currentSet.value++;
  } else {
    currentSet.value = 0; // 循环回到第一组
  }
};

const showPrevSet = () => {
  if (currentSet.value > 0) {
    currentSet.value--;
  } else {
    // 可选：循环到最后一组
    const totalSets = Math.ceil(allComics.value.length / cardsPerSet);
    currentSet.value = totalSets - 1;
  }
};
</script>

<style scoped lang="scss">
.hot-comic {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .top-head {
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 10px;

    h2 {
      font-size: 24px;
      margin-bottom: 5px;
      font-weight: normal;
    }

    span {
      color: gainsboro;
      font-size: 12px;
    }
  }

  .comic-wrapper {
    position: relative;
  }

  .comic-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .comic-card {
    flex: 0 0 auto;
    width: 220px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;

    &:hover {
      transform: translateY(-5px);
    }

    .comic-image {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }

    .comic-info {
      padding: 15px;
      background: white;

      .comic-title {
        font-size: 16px;
        margin-bottom: 8px;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .desc-number {
        display: flex;
        align-items: baseline;
        gap: 10px;

        .comic-desc {
          font-size: 12px;
          color: #666;
          margin-bottom: 4px;
        }

        .comic-number {
          font-size: 12px;
          font-weight: bold;
          color: #ffa947;
        }
      }
    }
  }

  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 2;

    &:hover {
      background: #f8f8f8;
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    svg {
      width: 16px;
      height: 16px;
      color: #666;
    }

    &.prev-btn {
      left: -10px;
    }

    &.next-btn {
      right: -10px;
    }
  }
}
</style>
